/*
  学习目标：如何给组件props添加默认值
  语法：
    1. 组件名.defaultProps = { 属性名：默认值 }
    2. 函数值组件最新方法：
      function 组件名({属性名= 默认值}){}
      💥 PropTypes包会认为没有传默认值
*/

import React, { Component } from 'react';
import PropTypes from 'prop-types';
export default class App extends Component {
  render() {
    return (
      <div>
        <Child
          name={<h1>React</h1>}
          obj={{ name: 'zs', age: 18 }}
          fn={() => {}}
          isShow={true}
          title={123}
        ></Child>
        <Child2 title={123}></Child2>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    const { title, color } = this.props;
    return (
      <div>
        {title.toFixed(2)} - {color}
      </div>
    );
  }
}

Child.defaultProps = {
  color: 'red',
};

function Child2({ color = 'green' }) {
  return <h2>Child2 - {color}</h2>;
}

Child2.propTypes = {
  title: PropTypes.number,
  color: PropTypes.string.isRequired,

  isShow: PropTypes.bool,
  fn: PropTypes.func,
  obj: PropTypes.shape({
    name: PropTypes.string,
    age: PropTypes.number,
  }),
  name: PropTypes.element,
};

// 2. 给组件设置检验规则
Child.propTypes = {
  title: PropTypes.number,
  color: PropTypes.string.isRequired,

  isShow: PropTypes.bool,
  fn: PropTypes.func,
  obj: PropTypes.shape({
    name: PropTypes.string,
    age: PropTypes.number,
  }),
  name: PropTypes.element,
};
